<!DOCTYPE html>
<html>
<head>
	<title>GmxControls Leaflet Quick Start Guide Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

    <link rel="stylesheet" href="../src/css/L.Control.gmxZoom.css" />
	<script src="../src/js/L.Control.gmxZoom.js"></script>

    <link rel="stylesheet" href="../src/css/L.Control.gmxLoaderStatus.css" />
	<script src="../src/js/L.Control.gmxLoaderStatus.js"></script>

    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0px;
        }
        #infoPanel {
            position: absolute;
			left: 0px;
			right: 0px;
			top: 21px;
            text-align: center;
			z-index: 1000;
        }
        
        #info {
			background-color: #ffffff;
			border-radius: 5px;
            box-shadow: 0 1px 7px rgba(0,0,0,0.65);
            padding: 10px;
        }
        .leaflet-gmx-zoomParent {
            top: 0px;
        }
        .leaflet-gmx-loaderStatus.leaflet-control {
		    position: relative;
			left: -5px;
			top: -98px;
		}
    </style>
</head>
<body>
	<div id="map"></div>
    <div id="infoPanel">
        <span id="info">
                Add L.control.gmxZoom to map + L.control.gmxLoaderStatus
        </span>
    </div>

	<script>
		var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
		});
		var map = new L.Map('map', {layers: [osm], center: new L.LatLng(50, 20), zoomControl: false, zoom: 6});
        var opt = {position: 'bottomright'};
		
        var gmxLoaderStatus = L.control.gmxLoaderStatus(opt);
        map.addControl(gmxLoaderStatus);
		
		gmxLoaderStatus.addItem(1);
		map.on('click', gmxLoaderStatus.removeItem.bind(gmxLoaderStatus, 1));

		map.addControl(L.control.gmxZoom(opt));			// default options = {position: 'topleft'}
	</script>
</body>
</html>
